<template>
	<view class="detailsBox">
		<header-box :title="pageTitle" :isShare="true"></header-box>
		<view class="boxMain" v-if="boxDetail">
			<view class="boxMain-detail">
				<view class="boxMain-detail-img">
					<image :src="boxDetail.boxImg" class="boxMain-detail-img_s noSaveImg" mode=""></image>
				</view>
				<view class="boxMain-detail-nums">
					<view class="boxMain-detail-nums-xingk"><text>{{boxDetail.boxName}}</text></view>
					<view class="boxMain-detail-nums-shul"><text>数量：{{boxDetail.currentNum}}</text></view>
				</view>
			</view>
			<view class="boxMain-boxlist">
				<view class="boxMain-boxlist-header"><text>可开出藏品</text></view>
				<view class="boxMain-boxlist-list" v-if="boxDetail.collectionInfoList.length>0">
					<view class="boxMain-boxlist-list-single" v-for="item,index in boxDetail.collectionInfoList" :key="index" @click="toDetail(item)">
						<view class="boxlist-tu"><image class="boxlist-tu-img noSaveImg" :src="item.img" mode=""></image></view>
						<view class="boxlist-price">￥{{item.price}}</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 底部 -->
		<view class="page-footer" :class="!pageFooterFlag?'page-footer-bottom':''" v-if="boxDetail">
			<view class="page-footer-box">
				<view class="page-footer-box-l">
<!-- 					<view class="page-footer-box-l-label"><text>余额</text></view>
					<view class="page-footer-box-l-val" v-if="userInfo"><text>￥{{userInfo.balance}}</text></view> -->
				</view>
				<view class="page-footer-box-r" :class="(boxDetail.state != 1 || boxDetail.currentNum<1)?'page-footer-box-r-no':''">
					<view class="page-footer-box-r-btn page-footer-box-r-btn-l" @click="toPay(1,boxDetail.price)">
						<text>{{boxDetail.price}}元拆1次</text>
					</view>
					<view class="page-footer-box-r-btn page-footer-box-r-btn-r" @click="toPay(5,boxDetail.batchPrice)">
						<text class="page-footer-box-r-btn-r-money">{{boxDetail.batchPrice}}元拆5次</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 售罄提示 -->
		<view class="no-box" v-if="boxDetail && boxDetail.currentNum<1"><text>该盲盒已售罄，瞧瞧别的吧～</text></view>
		<view class="no-box" v-if="boxDetail && boxDetail.state != 1"><text>该盲盒已下架，瞧瞧别的吧～</text></view>
		
		<realname-popup :successShow="isRealName" @closeRealName="closeRealName"></realname-popup>
		
		<app-footer></app-footer>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle:'',
				pageFooterFlag:true,
				pageScrollTimer:null,
				pageFooterFlag:true,
				boxList:[{
					price:'609.00',
					thumb:require('@/static/img/goods-img.png')	
				},{
					price:'609.00',
					thumb:require('@/static/img/goods-img.png')	
				},{
					price:'609.00',
					thumb:require('@/static/img/goods-img.png')	
				},{
					price:'609.00',
					thumb:require('@/static/img/goods-img.png')	
				},
				],
				boxId:'',
				boxDetail:null,
				userInfo:null,
				token:'',
				isRealName:false,
			}
		},
		computed:{
			priceFunc(){
				return function(e) {
					// console.log(e)
					let s = e.toString()
					if (s.indexOf('.')>-1) {
						let num = Number(s).toFixed(2)
						return num;
					} else {
						return e;
					}
				}
			}
		},
		onLoad(option) {
			if (option.boxId) {
				this.boxId = option.boxId;
				this.getGiftBoxDetail()
			}
			this.userInfo = uni.getStorageSync('userInfo') || null;
			this.token = uni.getStorageSync('token') || null;
		},
		methods: {
			getGiftBoxDetail() {
				this.$api.getGiftBoxDetail({boxId:this.boxId}).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.boxDetail = res.data;
					}
				})
			},
			toDetail(item) {
				uni.navigateTo({
					url:`/pages/collectionDetail/collectionDetail?collectionId=${item.collectionId}`
				})
			},
			toPay(num,price) {
				if (this.token && this.userInfo) {
					if (this.boxDetail.state !=1) {
						// uni.showToast({
						// 	title:'盲盒数量不够',
						// 	icon:'none'
						// })
						return false
					}
					if (num>this.boxDetail.currentNum) {
						// uni.showToast({
						// 	title:'盲盒数量不够',
						// 	icon:'none'
						// })
						return false
					}
					// 进行实名判断 已认证直接跳转
					if (this.userInfo.authState == 1) {
						this.$api.buyGiftBox({
							boxId:this.boxId,
							type:num == 1?'0':'1'
						}).then(res => {
							console.log(res)
							if (res.code == 200) {
								uni.navigateTo({
									url:`/pages/cashier/cashier?type=1&num=${num}&price=${res.data.price}&orderNo=${res.data.orderNo}`
								})
							}
						})	
					} else {
						// 未认证
						this.isRealName = true;
					}
					
				} else {
					// 不存在跳转登录页
					this.checkLogin(`/pages/detailsBox/detailsBox?boxId=${this.boxId}`)
				}
			},
			closeRealName(e) {
				this.isRealName = e;
			}
		},
		onPageScroll(e) {
			clearTimeout(this.pageScrollTimer) // 每次滚动前 清除一次
			this.pageFooterFlag = false;  
			this.pageScrollTimer = setTimeout(() => { 
				// console.log('滚动结束了');
				this.pageFooterFlag = true; 
			}, 500);
		},
		
	}
</script>

<style lang="less" scoped>
	.detailsBox{
		width: 100%;
		min-height: 100vh;
		background-color: #16181D;
		display: flow-root;
	}
	.boxMain{
		width: 100%;
		padding:0 32rpx 152rpx;
		box-sizing: border-box;
		.boxMain-detail{
			margin-top: 32rpx;
			width: 100%;
			height: 806rpx;
			background: #262A34;
			border-radius: 20px;
			.boxMain-detail-img{
				width: 100%;
				height: 686rpx;
				background: #D8D8D8;
				border-radius: 20px;
				.boxMain-detail-img_s{
					width: 100%;
					height: 100%;
					border-radius: 20px;
				}
			}
			.boxMain-detail-nums{
				width: 100%;
				color: #FFFFFF;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
				padding-top: 32rpx;
				.boxMain-detail-nums-xingk{
					margin-left: 64rpx;
					font-weight: 500;
					font-size: 32rpx;
					height: 56rpx;
					line-height: 56rpx;
				}
				.boxMain-detail-nums-shul{
					margin-right: 48rpx;
					color: #5D5F7A;
					font-size: 28rpx;
					height: 56rpx;
					line-height: 56rpx;
				}
			}
		}
		.boxMain-boxlist{
			width: 100%;
			padding-top: 48rpx;
			background-color: #16181D;
			.boxMain-boxlist-header{
				height: 48rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Semibold, PingFang SC,'微软雅黑';
				font-weight: 600;
				color: #5E6272;
				line-height: 48rpx;
			}
			// 添加一个伪类元素使得样式布局完整
			.boxMain-boxlist-list::after{
				content: '';
				width:216rpx;
			}
			.boxMain-boxlist-list{
				width: 100%;
				display: flex;
				justify-content: space-between;
				flex-direction: row;
				flex-wrap: wrap;
				.boxMain-boxlist-list-single{
					width: 216rpx;
					height: 216rpx;
					position: relative;
					border-radius: 12px;
					margin-bottom: 30rpx;
					overflow: hidden;
					.boxlist-tu{
						width: 216rpx;
						height: 216rpx;
						border-radius: 12px;
						.boxlist-tu-img{
							width: 216rpx;
							height: 216rpx;
							
						}
					}
					.boxlist-price{
						position: absolute;
						width: 100%;
						bottom: 0;
						height: 48rpx;
						line-height: 48rpx;
						background: #111313;
						border-radius: 0px 0px 12px 13px;
						opacity: 0.79;
						text-align: center;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}
	
	.page-footer{
		width: 100%;
		height: 152rpx;
		background: #202227;
		filter: blur(0px);
		position: fixed;
		bottom: 0;
		left: 0;
		transition: all 0.5s linear;
		.page-footer-box{
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			padding: 32rpx;
			box-sizing: border-box;
			.page-footer-box-l{
				flex: 1;
				.page-footer-box-l-label{
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(255,255,255,0.59);
					margin-top: 6rpx;
				}
				.page-footer-box-l-val{
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
			.page-footer-box-r{
				width: 512rpx;
				height: 88rpx;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;	
				.page-footer-box-r-btn{
					border-radius: 45rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;
					text-align: center;
					width: 248rpx;
				}
				.page-footer-box-r-btn-l{
					background: linear-gradient(228deg, #F0B04D 0%, #F28348 100%);
					line-height: 88rpx;
				}
				.page-footer-box-r-btn-r{
					background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
					display: flex;
					flex-direction: column;
					justify-content: center;
					.page-footer-box-r-btn-r-money{
						font-size: 32rpx;
					}
				}
			}
			.page-footer-box-r-no{
				.page-footer-box-r-btn{
					opacity: 0.4;
				}
			}
		}
	}
	.page-footer-bottom{
		bottom: -152rpx;
	}
	
	.no-box{
		width: 654rpx;
		height: 72rpx;
		background: rgba(255, 86, 86, 0.9);
		border-radius: 36rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 72rpx;
		text-align: center;
		position: fixed;
		left: 0;
		right:0;
		top: 0;
		bottom: 0;
		margin: auto;
		margin-bottom: 172rpx;
		z-index: 2;
	}
</style>
